import React from 'react'

import { Route } from 'react-router-dom'

import { TabBar } from 'antd-mobile'

import Index from '../Index'
import HouseList from '../HouseList'
import News from '../News'
import Profile from '../Profile'
import Map from '../Map'

import './index.css'

const tabItems = [
  {
    id: 1,
    title: '首页',
    icon: 'icon-ind',
    path: '/home'
  },
  {
    id: 2,
    title: '找房',
    icon: 'icon-findHouse',
    path: '/home/houselist'
  },
  {
    id: 3,
    title: '资讯',
    icon: 'icon-infom',
    path: '/home/news'
  },
  {
    id: 4,
    title: '我的',
    icon: 'icon-my',
    path: '/home/profile'
  }
]

export default class Home extends React.Component {
  state = {
    selectedTab: this.props.location.pathname
  }
  render() {
    return (
      <div className="home">
        <Route exact path="/home" component={Index}></Route>
        <Route path="/home/houseList" component={HouseList}></Route>
        <Route path="/home/news" component={News}></Route>
        <Route path="/home/profile" component={Profile}></Route>
        <TabBar
          unselectedTintColor="#949494"
          tintColor="#33A3F4"
          barTintColor="white"
        >
          {this.renderTabs()}
        </TabBar>
      </div>
    )
  }
  renderTabs() {
    return tabItems.map(item => {
      return (
        <TabBar.Item
          title={item.title}
          key={item.id}
          icon={<i className={'iconfont ' + item.icon}></i>}
          selectedIcon={<i className={'iconfont ' + item.icon}></i>}
          selected={this.state.selectedTab === item.path}
          onPress={() => {
            this.props.history.push(item.path)

            this.setState({
              selectedTab: item.path
            })
          }}
        ></TabBar.Item>
      )
    })
  }
}
